<script setup>
import { ref } from 'vue';
const props = defineProps(['total'])
const emit = defineEmits(['pageChange', 'getSelectData'])
const page = ref(1)
const pageSize = ref(10)
const onCurrentChange = (page) => {
  emit('pageChange', page, pageSize.value)
}
const onPageSizeChange = (size) => {
  emit('pageChange', page.value, size)
}
const xgTable = ref(null)
let allSelectData = []
const rowClick = (row) => {
  xgTable.value.toggleRowSelection(row)
}
const selectChange = (data) => {
  allSelectData = data
  emit('getSelectData', [...allSelectData])
}
</script>

<template>
  <el-table ref="xgTable" style="width: 100%" border v-bind="$attrs"  @row-click="rowClick" @selection-change="selectChange">
    <el-table-column type="selection" width="60" align="center"></el-table-column>
    <slot></slot>
  </el-table>
  <div class="page-box">
    <el-pagination 
      background 
      layout="prev, pager, sizes, next" 
      :total="props.total" 
      :pageSizes="[10, 20, 30, 40, 50, 100]"
      v-model:current-page="page"
      v-model:pageSize="pageSize"
      @update:current-page="onCurrentChange"
      @update:page-size="onPageSizeChange"
    />
  </div>
</template>

<style scoped>
.page-box {
  padding-top: 15px;
  display: flex;
  justify-content: end;
}
</style>